<template>
	<view class="followPlayer">
		<video 
		id="myVideo"
		class="video"
		objectFit="cover"
		:src=" 'http://124.221.26.166:8080/videos/video/'+item.src" 
		autoplay="true"
		loop="true"
		:controls="false"
		muted
		@click="playerTo(list)"
		custom-cache='false'
		>
		 <cover-view 
		 class="iconfont  icon-bofang  icon"  
		 @click="clicks">
		 </cover-view>
		 </video>
	</view>
</template>

<script>
	export default {
		// 接收来自followList的item
		props:['item','index','list'],
		name:"followPlayer",
		data() {
			return {
				Play:false,
				lastTapTimeoutFunc:null,
				lastTapDiffTime:0
			};
		},
		onReady() {
			this.videoContext=uni.createVideoContext('myVideo',this)
			if(this.index=== 0){
				this.play()
			}
		},
		methods:{
			play(){
				if(this.Play===false){
					this.videoContext.play()
				}
				this.Play=true
			},
			pause(){
				if(this.Play===true){
					this.videoContext.pause()
				}
				this.Play=false
			},
			clicks(){
				// console.log("播放")
				// 如果播放,点击后就暂停,反之暂停时点击则播放
				if(this.Play===true){
					this.videoContext.pause()
					this.Play=false
				}else{
					this.videoContext.play()
					this.Play=true
				}
			},
			playerTo(res){
				let _this = this;
				let curTime = new Date().getTime();
				let lastTime = _this.lastTapDiffTime;
				_this.lastTapDiffTime = curTime;
				//两次点击间隔小于300ms, 认为是双击
				let diff = curTime - lastTime;
				if (diff < 300) {
				    console.log("双击")
					// console.log(res)
					uni.setStorage({
						key:'videoList',
						data:res,
						success() {
							console.log("存入缓存成功")
						}
					})
					uni.navigateTo({
						url:'/pages/player/player?list=res'
					})
				    //_this.handleVideo('screen',index)自定义事件
				   clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
				 } else {
				  // 单击事件
				    // console.log("单击")
				   this.clicks()
				 }   
				
				  
				
			}
		}
	}
</script>

<style>
	.followPlayer{
		height: 100%;
		width: 100%;
	}
	.video{
		width: 80%;
		height: 100%;
		z-index: 19;
		/* 播放图标相对于视频的定位 */
		position: relative;
	}
	.icon{
		position: absolute;
		bottom: 10px;
		right: 10px;
		color: #FFFFFF;
		font-size: 20px;
	}

</style>